<template>
  <Transition name="MessageList">
    <div class="message-container" v-if="messageList && messageList.length > 0">
      <TransitionGroup name="MessageList">
        <div class="message-body" v-for="message in messageList" :key="message.id" v-show="message.alive">
          <div class="message-main">
            <Icon
              :iconClass="parseIconClass(message.type)"
              class="message-icon"
              :class="message.type === 'loading' ? 'loading' : ''"
            ></Icon>
            <p class="message">{{ message.message }}</p>
            <div class="message-close" @click="message.alive = false">
              <Icon iconClass="icon-a-youjiantouzhixiangyoujiantou" class="message-close-icon"></Icon>
            </div>
          </div>
          <div class="message-date">{{ useTime(new Date(message.id)) }}</div>
        </div>
      </TransitionGroup>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref, watch } from 'vue'
  import { useStore } from 'vuex'
  import { Message } from '@/winTypes'
  import Icon from '@/views/icon/Icon.vue'
  import { useTime } from '@/hooks/use-time'
  const messageList = ref<Message[]>()
  const store = useStore()
  onBeforeMount(() => {
    messageList.value = store.state.messageList
  })
  watch(
    () => store.state.messageList,
    () => {
      messageList.value = store.state.messageList
    },
    { deep: true }
  )
  const parseIconClass = (type?: string) => {
    switch (type) {
      case 'success':
        return 'icon-chenggong'
      case 'error':
        return 'icon-cuowu'
      case 'info':
        return 'icon-xinxi'
      case 'warning':
        return 'icon-jinggao'
      case 'loading':
        return 'icon-Loading-a'
      default:
        return 'icon-xinxi'
    }
  }
</script>

<style lang="scss" scoped>
  .message-container {
    position: fixed;
    width: 20%;
    right: 2%;
    bottom: 6vh;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 999999;

    .message-main {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .message {
        width: 50%;
      }
      .message-icon {
        font-size: 64px;
      }
      .message-close {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        .message-close-icon {
          transition: 0.4s ease;
        }
      }
      .message-close:hover {
        cursor: pointer;
      }

      .message-close:hover .message-close-icon {
        color: $theme-color;
        transform: translateX(8px);
      }
      .loading {
        animation-name: route;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-timing-function: ease-out;
        @keyframes route {
          0% {
            transform: rotate(360deg) scale(0.6);
            color: $theme-text-color;
          }
          70% {
            color: #2ba8ed;
            transform: rotate(-80deg) scale(1);
          }
          // 80% {
          //   color: $theme-color;
          //   transform: rotate(-300deg) scale(0.6);
          // }
          100% {
            transform: rotate(-360deg) scale(0.6);
            color: $theme-text-color;
          }
        }
      }
    }
    .message-body {
      background-color: rgba(255, 255, 255, 0.8);
      margin: 8px;
      width: 100%;
      text-align: center;
      border-radius: 10px;
      overflow: hidden;
      padding: 12px 0px;
      position: relative;
      z-index: 999999;
      box-shadow: 0px 0px 2px 0px #4e4e4e;
      backdrop-filter: blur(10px);
      .message-header {
        height: 20px;
        font-size: 20px;
        .title-right {
          display: flex;
          justify-content: right;
          align-items: center;

          .btn {
            border: none;
            background-color: rgba(255, 255, 255, 0);
            width: 24px;
            height: 20px;
            border-radius: 4px 4px 10px 10px;
            transition: 0.3s ease;
          }

          .zuixiaohua:hover,
          .zuidahua:hover {
            background-color: #cdcdcd;
          }

          .guanbi:hover {
            border-radius: 6px;
            background-color: rgba(232, 17, 35, 1);
          }
        }
      }
      .message {
        padding: 12px 6px;
        width: 48%;
      }
      .message-date {
        color: #acacac;
        font-size: 14px;
        position: absolute;
        bottom: 4px;
        right: 6px;
      }
    }
  }
  /* 对移动中的元素应用的过渡 */
  .MessageList-move,
  .MessageList-enter-active,
  .MessageList-leave-active {
    transition: all 0.5s ease;
  }
  // .MessageList-leave-active {
  //   position: absolute;
  // }

  .MessageList-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  .MessageList-enter-from {
    opacity: 0;
    background-color: aqua;
    transform: translateY(100px);
  }

  /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
  .MessageList-leave-active {
    position: relative;
  }
</style>
